<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
</head>
<body>


    <div class="clock">
      <div class="clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
        <div class="center"></div>
      </div>
    </div>


  <style>
    html {
      background:#018DED url(background.jpg);
      background-size:cover;
      font-family:'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      font-size: 2rem;
      display:flex;
      flex:1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      border:20px solid white;
      border-radius:50%;
      margin:50px auto;
      position: relative;
      padding:2rem;
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 3px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0,0,0,0.2);
    }

    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateY(-3px); /* account for the height of the clock hands */
    }

    .hand,.center {
      width:50%;
      height:6px;
      background:black;
      position: absolute;
      top:50%;

      /*transform-origin这个样式是用来与rotate样式配合，控制旋转中心的
      *设置为transiform-origin:100% 100%;表示以元素右下角为旋转中心
      * transiform-origin:100% 50%，以最右边中点为轴。
      */
      transform-origin:100% 50%;
      transition:all 0.05s;
      border-radius:6px

    }

    .second-hand{
      height: 3px;
      background-color: red;
    }
    .min-hand{
      background: white;
      height: 8px;
    }
    .hour-hand{
      background-color: white;
      height: 10px;
      width: 12rem;
      left: 3rem;
    }

    .center{
      width: 20px;
      height: 20px;
      background-color: #9Ebccc;
      left: 50%;margin-left:-10px;

      margin-top:-6px;
      border-radius:50%;
    }




  </style>

  <script>


    const secondHand = document.querySelector(".second-hand");
    const minHand = document.querySelector(".min-hand");
    const hourHand = document.querySelector(".hour-hand");

    function setTime(){
        const date = new Date();

        const seconds = date.getSeconds();
        const secondDegree = (seconds/60)*360 + 90;
        // console.log("secondes:", seconds); 48 会直接得到相应的秒数不用转换
        secondHand.style.transform = `rotate(${secondDegree}deg)`;

        const minutes = date.getMinutes();
        const minsDegree = (minutes/60)*360 + 90;
        // console.log("minutes:", minutes); 55
        minHand.style.transform = `rotate(${minsDegree}deg)`;

        const hours = date.getHours();
        const hoursDegree = (hours/60)*360 + 90;
        // console.log("hours:", hours);  15
        hourHand.style.transform = `rotate(${hoursDegree}deg)`;


    }

    setInterval(setTime,1000);

    // setInterval的第一次执行是要在一秒以后的
    setTime();

  </script>
</body>
</html>
